<template>
      <i-sticky :scrollTop="scrollTop" i-class='i-sticky-demo'>
          <div class='select-icon' @click.stop='toPage'><image src='/static/images/nav_screen@3x.png'/></div>
          <i-sticky-item v-for='(item,index) in dataList' :key='index'>
              <view slot="title" class='i-sticky-demo-title'>
                 <div>{{item.systemName}}</div>
              </view>
              <view slot="content" v-for='(child,childIndex) in item.devices' :key='childIndex'  @click='changeItem(child.deviceId,child.deviceTypeName,child.devicePos,child.deviceNum)'>
                  <view class="i-sticky-demo-item">
                      <div class='item-content'>
                          <div class='info-part'>
                              <div class='black'>{{child.deviceDesc}}</div>
                              <div>{{child.deviceNum}}</div>
                          </div>
                          <div class='info-part'>
                               <div>{{child.deviceTypeName}}</div>
                               <div>{{child.devicePos}}</div>
                          </div>
                      </div>
                      <div class='item-selected' :class='{opacity1:child.deviceId==selectedId}'><i-icon type="success" size='24' color='#2586d1' i-class='selected' /></div>
                    </view>
              </view>
          </i-sticky-item>
      </i-sticky>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
export default {  
  data() {
    return {
      scrollTop : 0,
      selectedId:1,
      dataList:[],
      floorId:'',
      zoneId:'',
      systemId:'',
      deviceTypeId:''
    }
  },
  onShow(){
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    var params = currPage.data;
    var query = this.$root.$mp.query;
    if(query.buildingId) this.buildingId = query.buildingId;
    if(params.floorId) this.floorId = params.floorId;
    if(params.zoneId) this.zoneId = params.zoneId;
    if(params.systemId) this.systemId = params.systemId;
    if(params.deviceTypeId) this.deviceTypeId = params.deviceTypeId;
    this.findList()
  },
  methods:{
      toPage(){
        wx.navigateTo({
            url:`/pages/repair_select/main?buildingId=${this.buildingId}`
        })
      },
      changeItem(id,deviceName,devicePos,deviceNum){
          this.selectedId = id; 
          this.back(deviceName,devicePos,deviceNum)
      },
      findList(){
          this.$http.post({
            url:'/project/getDevices',
            data:{
                ukey:this.userInfo.ukey,
                userId:this.userInfo.userId,
                buildingId:this.buildingId,
                floorId:this.floorId,
                zoneId:this.zoneId,
                systemId:this.systemId,
                deviceTypeId:this.deviceTypeId
            }
          }).then((res)=>{
              if(res.s==0){
                  this.dataList = res.i.Data;
              }
          }).catch((e)=>{
              console.log('请求失败',e)
          })
      },
      back(deviceName,devicePos,deviceNum){
            let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
            let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
            prevPage.setData({  // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
                deviceName,
                deviceId:this.selectedId,
                faultPos:devicePos,
                deviceNum,
            })  
            wx.navigateBack({delta:1})
      }
  },
  computed:{
    ...mapState(['userInfo']),
  },
  onChange(event){
    console.log(event.detail,'click right menu callback data')
  },
  //页面滚动执行方式
  onPageScroll(event){
    this.scrollTop = event.scrollTop
  }
}
</script>

<style lang='less'>
    page{
        background:#eef7fd;
        height:100%;
    }
    ::-webkit-scrollbar{
        width: 0;
        height: 0;
        color: transparent;
    }
    .i-sticky-demo{
        width:100%;
        height:100%;
        background: transparent;
        position: relative;
        .select-icon{
            position: fixed;
            right:20rpx;
            top:20rpx;
            align-self: center;
            z-index:2;
            image{
                width: 40rpx;
                height: 40rpx;
                vertical-align: middle
            }
        }
    }
    .i-sticky-demo-title{
        color:#4396d6;
        background:#eef7fd;
        padding: 0 20rpx;
        font-size:32rpx;
        display: flex;
        justify-content: space-between;
    }
    .i-sticky-demo-item{
        color:#8a8a8a;
        padding:10px;
        border-bottom:#dfe3e5 solid 2rpx;
        font-size:14px;
        display: flex;
        .item-content{
            display: flex;
            flex:1;
            .info-part{
                flex:1;
                line-height: 60rpx;
                font-size:30rpx;
                .black{
                    color: #000;
                    font-weight: 600
                }
            }
        }
        .item-selected{
            align-self: center;
            opacity: 0
        }
        .opacity1{
            opacity: 1
        }
        
    }
</style>
